<div class="w-full flex justify-start items-center px-3 pt-3 pb-2">
  <emoji-avatar [avatar]="knowledgebase()?.avatar" small class="shrink-0 mr-2 rounded-lg overflow-hidden shadow-sm" />
  <div class="flex flex-col">
    <span class="text-lg">{{knowledgebase()?.name}}</span>
  </div>

  <div class="flex-1"></div>

  <div class="flex items-center">

    <div class="flex items-center justify-center mr-1 w-8 h-8 rounded-md cursor-pointer text-text-tertiary hover:text-base-content
      hover:bg-hover-bg"
      [matTooltip]="'PAC.Xpert.Test' | translate: { Default: 'Test' }"
      (click)="openTest()"
    >
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="w-5 h-5">
        <path d="M8 18.3915V5.60846L18.2264 12L8 18.3915ZM6 3.80421V20.1957C6 20.9812 6.86395 21.46 7.53 21.0437L20.6432 12.848C21.2699 12.4563 21.2699 11.5436 20.6432 11.152L7.53 2.95621C6.86395 2.53993 6 3.01878 6 3.80421Z"></path>
      </svg>
    </div>

    <div class="flex items-center justify-center w-8 h-8 rounded-md cursor-pointer
      text-text-tertiary hover:text-base-content hover:bg-hover-bg"
      (click)="closePanel()"
    >
      <ngm-close-svg class="w-5 h-5" />
    </div>
  </div>
</div>

<div class="w-full flex flex-col justify-start items-stretch px-4">
  <div class="px-2 my-4 text-text-tertiary text-sm line-clamp-3" [title]="knowledgebase()?.description">
    {{knowledgebase()?.description}}
  </div>

  @if (knowledgebase()?.id) {
    <copilot-model-select class="text-text-secondary"
      readonly
      [modelType]="eModelType.TEXT_EMBEDDING"
      [copilotModel]="copilotModel()"
    />
  }
</div>

<div class="w-full flex flex-col p-4">
  <knowledge-recall-params class="w-full" [enableWeight]="true" [ngModel]="recall()" (ngModelChange)="updateRecall($event)" />
</div>

@if (!loading() && !knowledgebase()?.id) {
  <div class="flex flex-col justify-start items-stretch p-4 space-y-4 w-full">
    <button class="btn btn-large btn-primary self-center" (click)="gotoKnowledgebase()">
      {{ 'PAC.Xpert.Reconfigure' | translate: {Default: 'Reconfigure'} }}
    </button>

    @if (knowledgebases()?.length) {
      <div class="flex items-center mb-4 leading-[18px] text-base font-semibold text-gray-500 uppercase">
        <div class="mr-3">{{'PAC.Xpert.OrReselect' | translate: { Default: 'Or reselect'} }}</div>
        <div class="grow w-0 h-px bg-divider-regular"></div>
      </div>

      <ul class="p-2 flex flex-col gap-1">
        @for (knowledgebase of knowledgebases(); track knowledgebase.id) {
          <li class="group/item w-full flex flex-col items-stretch px-2 py-1 rounded-lg border-[0.5px] border-solid border-transparent hover:border-gray-100">
            <div class="relative flex items-center w-full">
              <emoji-avatar small [avatar]="knowledgebase.avatar" class="mr-1 shrink-0 rounded-lg overflow-hidden shadow-sm" />
              {{knowledgebase.name}}

              <button type="button" class="absolute right-0 btn btn-small opacity-0 group-hover/item:opacity-100"
                (click)="useKnowledgebase(knowledgebase)"
              >
                {{ 'PAC.Xpert.Use' | translate: {Default: 'Use'} }}
              </button>
            </div>
          </li>
        }
      </ul>
    }
  </div>
}

@if (openedTest()) {
  <div class="absolute top-0 left-0 w-full h-full z-50 rounded-t-2xl bg-black/20 dark:bg-neutral-500/50 backdrop-blur-[2px]" @ifAnimationTrigger
    (click)="closeTest()">
    <xpert-knowledge-test class="absolute top-14 left-0 bottom-0 w-full rounded-t-xl bg-components-panel-bg"
      [knowledgebase]="knowledgebase()"
      (click)="$event.stopPropagation()"
      (close)="closeTest()"
    />
  </div>
}